/*
 * @Description: 图片上传组件
 * @Author: kanglin
 * @Date: 2018-08-16 17:55:17
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .picker{
        width: 58px;
        height: 58px;
        line-height: 62px;
        background: #fff;
        border: 1px dashed #dddee1;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        position: relative;
        // overflow: hidden;
        transition: border-color .2s ease;
        &:hover{
            border: 1px dashed #2d8cf0;
        }
	}

	.thumb{
		width: 58px;
        height: 58px;
        line-height: 62px;
        background: #fff;
        border: 1px dashed #dddee1;
        border-radius: 4px;
		text-align: center;
		// overflow: hidden;
		position: relative;
		&>img{
			width: 100%;
			height: 100%;
		}
	}
	.thumb:hover .thumb__mask{
		display: block;
	}
	.thumb__mask{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(10, 10, 10, .5);
		color: #ffffff;
		cursor: pointer;
		display: none;
	}

	.thumb__mask__icon{
		// margin:0 5px;
	}

	// del-img-icon ivu-icon ivu-icon-ios-close

	.preview{
		width: 100%;
	}

	.thumb__mask__icon.remove{
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		height: 20px;
		width: 20px;
		line-height: 20px;
		transform: translate3d(50%, -50%, 0);
	}
</style>

<template>
	<div class="v-comp-uploader">
		<input
			ref="file-input"
			hidden
			type="file"
			accept="image/jpg, image/jpeg, image/png"
			@change="handleChange">
		<div
			v-show="!thumb"
			class="picker"
			@click="pickerFile">
			<Icon
				size="20"
				type="ios-cloud-upload" />
		</div>

		<div
			v-show="thumb"
			class="thumb">
			<img
				:src="thumb"
				alt="thumb">
			<div
				class="thumb__mask">
				<i
					class="thumb__mask__icon"
					@click="openPreview">
					<Icon
						size="20"
						type="ios-eye"
					/>
				</i>

				<i
					class="thumb__mask__icon remove"
					@click="clearFile">
					<Icon
						size="20"
						type="ios-close" />
				</i>

				<!-- <i
					class="thumb__mask__icon"
					@click="pickerFile">
					<Icon
						size="20"
						type="android-sync" />
				</i> -->

			</div>
		</div>

		<slot/>

		<Modal
			v-model="is_show"
			:title="$t('upload.preview')">
			<img
				:src="thumb"
				class="preview"
				alt="preview">
		</Modal>
	</div>
</template>

<script>
export default {
	name: 'Uploader',
	props: {
		default: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {
			thumb: '',

			is_show: false, // 是否显示
		};
	},
	watch: {
		default() {
			this.thumb = this.default ? this.default : '';
		},
	},
	created() {
		this.thumb = this.default ? this.default : '';
	},
	methods: {
		/**
         * 选取文件
         */
		pickerFile() {
			this.$refs['file-input'].click();
		},

		/**
		 *  处理选取文件
		 */
		handleChange(event) {
			const [file] = event.target.files;
			if (file) {
				this.readURL(file)
					.then((url) => {
						this.thumb = url;
						this.$emit('update:default', this.thumb);
						this.$emit('on-change', { url, file });
					})
					.catch((error) => {
						this.$Message.error(error.message);
					});
			}
		},

		/**
		 *  预览
		 */
		openPreview() {
			this.is_show = true;
		},

		/**
		 *  读取文件url
		 *  @param {File} file
		 *  @return {promise} url;
		 */
		readURL(file) {
			if (!file) {
				return Promise.reject(new Error(this.$t('upload.invalid_file')));
			}
			const reader = new FileReader();
			reader.readAsDataURL(file);
			return new Promise((resolve, reject) => {
				reader.addEventListener('load', () => {
					resolve(reader.result);
				}, false);

				reader.addEventListener('error', () => {
					reject(new Error(this.$t('upload.read_fail')));
				}, false);
			});
		},

		/**
		 * 清空文件
		 */
		clearFile() {
			this.$emit('on-remove', this.$refs['file-input'].files[0]);
			this.reset();
		},

		/**
		 * 重置
		 */
		reset() {
			this.$emit('update:default', '');
			this.$refs['file-input'].value = '';
			this.thumb = '';
		},

	},
};
</script>
